import type { ActionType, ProColumns, FormInstance } from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
  ProFormSelect,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

import React, { useRef, useState } from 'react';
import { operatePage } from '@/services/back/back';

const Index: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const queryRef = useRef<FormInstance>();
  const [extraParams, setExtraParams] = useState({
    msg: undefined,
    phone: undefined,
    userName: undefined,
  });

  const fetchData = async (params: { pageSize?: number; current?: number }) => {
    const res = await operatePage({
      ...params,
      pageNum: params.current,
    } as BackApi.OperateQuery);
    if (res?.code !== 1000) return;
    const { list: data = [], total = 0 } = res?.data ?? {};
    return { data, success: true, total };
  };

  const fetchSearch = async (values: any) => {
    setExtraParams(values);
  };

  const reset = () => {
    setExtraParams({});
  };

  const columns: ProColumns<BackApi.OperateItem>[] = [
    {
      title: '用户ID',
      dataIndex: 'userId',
    },
    {
      title: '提问',
      dataIndex: 'msg',
      ellipsis: true,
    },
    {
      title: '结果',
      dataIndex: 'rst',
      ellipsis: true,
    },
    {
      title: '时间',
      dataIndex: 'time',
      ellipsis: true,
    },
  ];

  return (
    <PageContainer>
      {/* form */}
      <div style={{ background: '#fff', padding: 16, marginBottom: 16 }}>
        <QueryFilter
          onFinish={fetchSearch}
          onReset={reset}
          formRef={queryRef}
          defaultCollapsed={false}
        >
          <ProFormText name="userName" label="用户名" allowClear />
          <ProFormText name="phone" label="电话号码" allowClear />
          <ProFormText name="msg" label="信息" allowClear />
        </QueryFilter>
      </div>

      {/* table */}
      <ProTable<any, any>
        headerTitle={'用户操作记录'}
        params={extraParams}
        request={fetchData}
        actionRef={actionRef}
        rowKey="id"
        search={false}
        columns={columns}
      />
    </PageContainer>
  );
};

export default Index;
